/* eslint-disable import/first */
import React, { useState, useEffect } from 'react'
import { View, Image, Text } from '@tarojs/components'
import { AtButton, AtTabs } from "taro-ui"
import Taro from '@tarojs/taro'
import api from '../../../src/http/api'
import lhTool from 'lh-tool'
import ToLogin from '../../compontents/toLogin'


import './index.less'
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/tabs.scss";

export default (props: any) => {
  const info:any  = Taro.getStorageSync('info')
  const loginId:any = info?JSON.parse(info).userInfo.loginId:0
  const [list, setList]: any = useState([])
  const [current,setCurrent]=useState(0)
  const handleClick = (e: any) => {
    setCurrent(e)
    if(e===0){
      getData(2)
    }else if(e===1){
      getData(0)
    }else if(e===2){
      getData(1)
    }
  }
  const getData = (use:any)=>{
    api.cardList({
      loginId,
      isUse:use
    }).then((res:any)=>{
      setList(res.data)
    })
  }
  const useCard=(id:any)=>{
    Taro.showModal({
      title: '提示',
      content: '确定使用该券吗？',
      complete: function (res:any) {
        if(res.confirm){
          api.useCard({id}).then(()=>{
            Taro.showToast({
              title: '使用成功，请在已使用券中查看',
              icon: 'success',
            })
            if(current===0){
              getData(2)
            }else if(current===1){
              getData(0)
            }else if(current===2){
              getData(1)
            }
          })
        }
        
      }
    })
  }
  const deleteCard=(id:any)=>{
    Taro.showModal({
      title: '提示',
      content: '确定删除该券吗？',
      complete: function (res:any) {
        if(res.confirm){
          api.cardDelete({id}).then(()=>{
            Taro.showToast({
              title: '删除成功',
              icon: 'success',
            })
            if(current===0){
              getData(2)
            }else if(current===1){
              getData(0)
            }else if(current===2){
              getData(1)
            }
          })
        }
        
      }
    })
  }
  useEffect(()=>{
    getData(2)
  },[])
  return (
    <View className='myCard'>
      <ToLogin url='/pages/my/index'></ToLogin>
      <AtTabs
        // animated={false}
        current={current}
        tabList={[
          { title: '全部' },
          { title: '待使用' },
          { title: '已使用' }
        ]}
        onClick={handleClick}
      >
      </AtTabs>
      <View className='cardList'>
        {
          list.map((item, i) => (
            item.type === 1 ? (<View className='cardLi'>
              <View className='bg' style={{ backgroundImage: IMGSRC + 'card1.png' }}>
                <Image className='cardIco' src={IMGSRC + 'card1.png'} />
          <View className='p0'><Text className='num'>{item.cont}</Text>折</View>
              </View>
              <View className='content'>
                <View className='c1'>折扣券</View>
                <View className='c2'>{item.title}</View>
                <View className='c3'>{lhTool.formatDate.format(new Date(item.publishTime),'yyyy.MM.dd')}~{lhTool.formatDate.format(new Date(item.endTime),'yyyy.MM.dd')}</View>
                {
                  item.isUse!==0&&(<View className='c4'>使用时间：{lhTool.formatDate.format(new Date(item.useTime),'yyyy.MM.dd hh:mm:ss')}</View>)
                }
              </View>
              {
                !item.isUse?(<AtButton className='getBtn' size='small' onClick={()=>{useCard(item.id)}}>立即使用</AtButton>):(<AtButton className='getBtn2' size='small' onClick={()=>{deleteCard(item.id)}}>删除</AtButton>)
              }
            </View>) : item.type === 2 ? (<View className='cardLi'>
              <View className='bg' style={{ backgroundImage: IMGSRC + 'card2.png' }}>
                <Image className='cardIco' src={IMGSRC + 'card2.png'} />
                <View className='p0'>¥<Text className='num'>{item.cont}</Text></View>
              </View>
              <View className='content'>
                <View className='c1'>套餐券</View>
                <View className='c2'>{item.title}</View>
                <View className='c3'>{lhTool.formatDate.format(new Date(item.publishTime),'yyyy.MM.dd')}~{lhTool.formatDate.format(new Date(item.endTime),'yyyy.MM.dd')}</View>
                {
                  item.isUse!==0&&(<View className='c4'>使用时间：{lhTool.formatDate.format(new Date(item.useTime),'yyyy.MM.dd hh:mm:ss')}</View>)
                }
              </View>
              {
                !item.isUse?(<AtButton className='getBtn' size='small' onClick={()=>{useCard(item.id)}}>立即使用</AtButton>):(<AtButton className='getBtn2' size='small' onClick={()=>{deleteCard(item.id)}}>删除</AtButton>)
              }
            </View>) : item.type === 3 ? (<View className='cardLi'>
              <View className='bg'>
                <Image className='cardIco' src={IMGSRC + 'card3.png'} />
                <View className='p0'>¥<Text className='num'>{item.cont}</Text></View>
              </View>
              <View className='content'>
                <View className='c1'>体验券</View>
                <View className='c2'>{item.title}</View>
                <View className='c3'>{lhTool.formatDate.format(new Date(item.publishTime),'yyyy.MM.dd')}~{lhTool.formatDate.format(new Date(item.endTime),'yyyy.MM.dd')}</View>
                {
                  item.isUse!==0&&(<View className='c4'>使用时间：{lhTool.formatDate.format(new Date(item.useTime),'yyyy.MM.dd hh:mm:ss')}</View>)
                }
              </View>
              {
                !item.isUse?(<AtButton className='getBtn' size='small' onClick={()=>{useCard(item.id)}}>立即使用</AtButton>):(<AtButton className='getBtn2' size='small' onClick={()=>{deleteCard(item.id)}}>删除</AtButton>)
              }
            </View>) : (<View className='cardLi'>
              <View className='bg'>
                <Image className='cardIco' src={IMGSRC + 'card4.png'} />
            <View className='p1'>¥<Text className='num'>{item.cont.split('&')[1]}</Text></View>
            <View className='p2'>满{item.cont.split('&')[0]}元使用</View>
              </View>
              <View className='content'>
                <View className='c1'>满减券</View>
                <View className='c2'>{item.title}</View>
                <View className='c3'>{lhTool.formatDate.format(new Date(item.publishTime),'yyyy.MM.dd')}~{lhTool.formatDate.format(new Date(item.endTime),'yyyy.MM.dd')}</View>
                {
                  item.isUse!==0&&(<View className='c4'>使用时间：{lhTool.formatDate.format(new Date(item.useTime),'yyyy.MM.dd hh:mm:ss')}</View>)
                }
              </View>
              {
                !item.isUse?(<AtButton className='getBtn' size='small' onClick={()=>{useCard(item.id)}}>立即使用</AtButton>):(<AtButton className='getBtn2' size='small' onClick={()=>{deleteCard(item.id)}}>删除</AtButton>)
              }
            </View>)
          ))
        }
      </View>
    </View>
  )
}
